
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>上传文件</title>
	<style type="text/css">
	.head{
		width: 100%;
		height:80px;
		margin-bottom: 20px;
		background: #263E56 url() 0 0 no-repeat;
	}
	li{
		list-style: none;
	}
	*{
		margin: 0px;
		padding: 0px;
	}
	.head span{
		display: block;
		width: 300px;
		line-height: 80px;
		margin: 0 auto;
		text-align: center;
		font-size: 25px;
		color: #FEFEFE;
	}
	.content{
		width: 100%;
		height: 550px;
		position: relative;
	}
	.content .middle{
		width: 1000px;
		height: 500px;
		margin: 0 auto;	
	}
	.content .middle .show{
		/*overflow: hidden;*/
		margin-top: 15px;
		width: 1000px;
		height: 400px;
		border:1px solid #E7E7E7;
	}
	.content .middle .show .list{
		float: left;
		width: 165px;
		height: 80px;
		text-align: center;
		line-height: 80px;
		color: #0168FB;
	}
	.content .middle .show .list #down{
		color: #7988F2;
	}
	.content .middle .show .list #cut{
		color: #F4260B;
	}
	.content .middle .show dd{
		width: 165px;
		height: 40px;
		line-height: 40px;
		color: #272822;
	}
	.content .middle .onload{

		width: 500px;
		height: 100px;
		margin: 0 auto;
		
	}
	.content .middle .onload .left{
		width: 200px;
		height: 60px;
		float: left;
		margin-left: 50px;
		margin-top: 20px;
		background:  url(./images/onload.png) 0 0 no-repeat;
	}
	.content .middle .onload .right{
		width: 100px;
		height: 60px;
		float: right;
		margin-right: 50px;
		margin-top: 20px;
		background:  url(./images/submit.png) 0 0 no-repeat;
	}
	.file{
		width: 200px;
		height: 60px;
		position: absolute;
		top:120px;
		left: 360px;
		opacity: 0;
		background: red url() 0 0 no-repeat;
	}	
	.submit{
		width: 100px;
		height: 50px;
		position: absolute;
		top:120px;
		right: 360px;
		opacity: 0;
	}
	.paging {
	width: 300px;
	height: 30px;
	margin: 0 auto;
	margin-bottom: 25px;	
	}

	.paging_num{
	width: 30px;
	height: 28px;
	border: 1px solid #E7E7E7;
	margin-right: 10px;
	float: left;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
	}
	.paging_num:hover{
		border-color:#0168FB;
		cursor: pointer;
	}
	.active{
		background: #263E56 url() 0 0 no-repeat;
		color: #fff;
	}



	</style>
</head>
<body>
	<div class="head">
		<span>多图片上传/下载/删除</span>
	</div>
	<div class="content">
		<div class="middle">
			<div class="onload">
				<ul>
					<li class="left"></li>
					<li class="right"></li>
				</ul>
			</div>
			<div class="show">
				<dl class="list">
					<dt>图片</dt>
				</dl>
				<dl class="list">
					<dt>图片名</dt>
				</dl>
				<dl class="list">
					<dt>上传时间</dt>
				</dl>
				<dl class="list">
					<dt>大小</dt>
				</dl>
				<dl class="list">
					<dt>下载</dt>
				</dl>
				<dl class="list">
					<dt>删除</dt>
				</dl>


				<?php foreach ($files as $value) { ?>
					
					<dl class="list">
					<dd><img src="<?php echo $value ?>" alt="" style="width:80px;"></dd>
					</dl>
					<dl class="list">
						<dd><?php echo basename($value) ?></dd>
					</dl>
					<dl class="list">
						<dd><?php echo date("Y-m-d H:i:s",filemtime($value)) ?></dd>
					</dl>
					<dl class="list">
						<dd><?php echo U(filesize($value)) ?></dd>
					</dl>
					<dl class="list">
						<dd><a href="./down.php?url=<?php echo $value ?>" id="down">下载</a></dd>
					</dl>
					<dl class="list">
						<dd><a href="./del.php?url=<?php echo $value ?>" id="cut">删除</a></dd>
					</dl>

				<?php }  ?>

			</div>
		</div>
	</div>
	<div class="paging">
		<?php if ($p!=1) { ?> 
		<!-- 点击p不在第一个按纽时 一直出现向左翻页 -->
			<a href="./onload.php?p=<?php echo $p-1 ?>" class="paging_num">&lt;</a>
		<?php } ?>

		<?php if($total>5){ ?>

		<?php if($p>=3 && $p < ($total-2)){ ?>
			<?php for ($i=$p-2; $i <=$p+2 ; $i++) { ?> 
			<!-- 总页数>5且3>点击p>页数-2时，循环5个等差的数字按纽 -->
			<a href="./onload.php?p=<?php echo $i ?>" class="paging_num <?php if($p==$i){ echo 'active';} ?>"><?php echo $i ?></a>
			<?php } ?>
		<?php } ?>

		<?php if($p<=2){ ?>
			<?php for ($i=1; $i <=5 ; $i++) { ?> 
			<!-- 总页数>5 点击p小于 =2时 循环1-5 -->
			<a href="./onload.php?p=<?php echo $i ?>" class="paging_num <?php if($p==$i){ echo 'active';} ?>"><?php echo $i ?></a>
			<?php } ?>
		<?php } ?>

		<?php if($p>=($total-2)){ ?>
			<?php for ($i=$total-4; $i <=$total ; $i++) { ?> 
			<!-- 总页数>5 点击p在最后三个按纽时，循环最后5个数 -->
			<a href="./onload.php?p=<?php echo $i ?>" class="paging_num <?php if($p==$i){ echo 'active';} ?>"><?php echo $i ?></a>
			<?php } ?>
		<?php }

		}else{ ?>
			<!-- 总页数小于5时 循环1-5 -->
			<?php for ($i=1; $i <=$total ; $i++) { ?> 
			<a href="./onload.php?p=<?php echo $i ?>" class="paging_num <?php if($p==$i){ echo 'active';} ?>"><?php echo $i ?></a>
			<?php } ?>


			<?php } ?>


		<?php if ($p!=$total) { ?> 
			<!-- 点击p不在最后一个按纽时 一直出现向右翻页 -->
			<a href="./onload.php?p=<?php echo $p+1 ?>" class="paging_num">&gt;</a>
		<?php } ?>
	
	</div>
	<form action="onload.php" method="post" enctype="multipart/form-data">
		<input class ="file" type="file" value="" name="myfile[]" multiple="true">
		<input class="submit" type="submit" value="上传">
	</form>
</body>
</html>